<template>
	<view class="">
		<img :src="avatar" alt="" style="width: 100%;height: 760rpx;margin-top: 128rpx;"/>
		<up-upload :fileList="fileList6" @afterRead="afterRead" @delete="deletePic" name="6" multiple :maxCount="1"
			width="250" height="150">
		<view class="login-button">更换头像</view>
		</up-upload>
	</view>
	
</template>
<script>
	import {
		http
	} from 'uview-plus'
	export default {
		data() {
			return {
				avatar: [],
				name:'',
			}
		},
		onLoad(options){
			this.avatar = options.avatar
			this.name = options.name
		},
		methods: {
			// 删除图片
			deletePic(event) {
				this.fileList.value.splice(event.index, 1);
			},

			// 新增图片
			async afterRead(event) {
				console.log(event)
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let file = event.file[0].url;
				this.avatar = file
				const result = this.uploadFilePromise(file);
				
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					console.log(url)
					// return
					let a = uni.uploadFile({
						url: 'https://www.jinqike.com/prod/api/upload/image', // 仅为示例，非真实的接口地址
						header:{
							'Authorization':uni.getStorageSync('token'),
							'Content-Type':'multipart/form-data'
						},
						filePath: url,
						name: 'image',
						success: (res) => {
							
							var url=JSON.parse(res.data)
							console.log(url)
							this.saveAvator(url.data.url)
						},
					});
				});
			},
			async saveAvator(url){
				await http.post('/shop/user/update', {
					nickname: this.nickName,
					avatar: 'https://www.jinqike.com/prod'+url
				}).then(res => {
					uni.showToast({
						title: '修改成功'
					})
					uni.navigateBack()
				})
			}
		}
	}
</script>

<style>
	page{
		width: 100%;
		height: 100%;
		background: #000;
	}
	.u-upload__wrap{
		justify-content: center;
	}
	.login-button {
		line-height: 100rpx;
		width: 682rpx;
		height: 100rpx;
		border-radius: 12rpx;
		opacity: 1;
		background: #262626;
		opacity: 1;
		text-align: center;
		margin: 0 auto;
		margin-top: 50px;
		font-size: 36rpx;
		font-weight: normal;
		color: #FFFFFF;
	}
</style>